import React, { useRef, useEffect } from "react";
import ReactFlow from "react-flow-renderer";
import "./index.less";
interface DotProps {
  demo?: any;
}
const elements = [
  {
    id: "1",
    type: "input", // input node
    data: { label: "Input Node" },
    position: { x: 250, y: 25 },
  },
  // default node
  {
    id: "2",
    // you can also pass a React component as a label
    data: { label: <div style={{ height: "200px" }}>Default Node</div> },
    position: { x: 100, y: 125 },
    style: {
      backgroundColor: "red",
    },
  },
  {
    id: "3",
    type: "output", // output node
    data: { label: "Output Node" },
    position: { x: 250, y: 250 },
  },
  // animated edge
  { id: "e1-2", source: "1", target: "2", animated: true },
  { id: "e2-3", source: "2", target: "3" },
];

const style = {
  background: "grey",
  width: "100%",
  height: 1000,
};

const Dot = (props: DotProps) => {
  return (
    <div style={{ height: 300 }}>
      <ReactFlow elements={elements} style={style} />
    </div>
  );
};

export default Dot;
